<template>
  <div class="endCheck">
    <header-com :title="title" moduleName="endMatch"></header-com>
    <tabs
      :tabList="tabList"
      :activeTab="defaultId"
      :status="status"
      v-on:change="tabsNumChange"
    ></tabs>
    <teamTabs
      v-show="defaultId == 100 || defaultId == 1"
      :slider="slide"
      v-on:change="slideNumChange"
    ></teamTabs>
    <div v-show="defaultId == 100">
      <roundSwiper
        v-show="shows"
        :roundList="roundList"
        v-on:roundNum="roundChange"
      ></roundSwiper>
      <div style="padding: 0.2rem" v-show="shows">
        <roundNumber
          :match="signForm"
          :roundNum="roundNum"
          :keys="keys"
          :types="type"
        ></roundNumber>
        <roundForm :form="form" v-if="formshow"></roundForm>
      </div>
      <div v-show="!shows" style="padding: 0.2rem">暂无数据</div>
    </div>
    <div class="table" v-show="defaultId == 1">
      <table v-if="type != 5">
        <thead>
          <tr>
            <th>姓名</th>
            <th>单位</th>
            <th>比赛名次</th>
            <th v-if="rangForm.length != 0 && rangForm[0].series_all != 0">
              比赛积分
            </th>
            <th v-if="rangForm.length != 0 && rangForm[0].series_all != 0">
              总积分
            </th>
            <th v-if="rangForm.length != 0 && rangForm[0].series_all != 0">
              总名次
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in rangForm" :key="index">
            <td>{{ item.user_name }}</td>
            <!-- {{item.one_limit}}{{item.two_limit}}{{item.three_limit}} {{item|Company}}-->
            <td>{{ item | Company }}</td>
            <td>{{ item.ranking }}</td>
            <td v-if="rangForm[0].series_all != 0">{{ item.series_now }}</td>
            <td v-if="rangForm[0].series_all != 0">{{ item.series_all }}</td>
            <td v-if="rangForm[0].series_all != 0">{{ item.ranking_all }}</td>
          </tr>
        </tbody>
      </table>
      <table v-else>
        <thead>
          <tr>
            <th>分区</th>
            <th>姓名</th>
            <th>单位</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in rangForm" :key="index">
            <td>{{ item.second_order }}</td>
            <td>{{ item.user_name }}</td>
            <td>{{ item.one_limit }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div v-if="defaultId == 3">
      <div
        class="match-detail"
        style="
          position: fixed;
          top: 1.7rem !important;
          width: 100%;
          height: 100%;
        "
      >
        <header-com :title="title" moduleName="match"></header-com>
        <!-- <tabs class="tabs" v-model="activeTab" :tabList="tabList" :activeTab="activeTab" :status="status"></tabs> -->
        <scroller
          :on-refresh="refresh"
          :on-infinite="infinite"
          ref="myscroller"
        >
          <match-end-search
            :groups="slide"
            v-on:childByValue="childByValue"
          ></match-end-search>
          <matchBattle class="battle" :matchs="battleList"></matchBattle>
        </scroller>
        <div v-if="battleList.length > 5" class="fixed" @click="scroll">
          <van-icon name="upgrade" />
        </div>
      </div>
    </div>
    <div
      v-if="defaultId == 5 && rules.content"
      v-html="rules.content"
      class="article"
    ></div>
    <div v-if="defaultId == 7">
      <!-- 战表 -->
      <van-field
        readonly
        clickable
        label="比赛日期 "
        :value="value"
        placeholder="请选择日期"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" round position="bottom">
        <van-picker
          show-toolbar
          :columns="com_time"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>

      <!-- <div
        class="clone_ground_name"
        :style="{ transform: 'translateX(' + moveY + 'px)' }"
      >
        <div
          class="ground_name"
          v-for="(item, index) in roundSwiper"
          :key="index"
        >
          {{ item }}
        </div>
      </div> -->

      <div class="Swiper" @touchmove="handleMove">
        <div class="content" v-for="(item, index) in roundSwiper" :key="index">
          <div class="ground_name">{{ item.name }}</div>
          <div
            class="field_li"
            @click="isPopup(index, group_index)"
            v-for="(group, group_index) in schedule[index]"
            :key="group_index"
            :style="group.id === undefined?'background-color:#fff':'background-color: #f0fbf6'"
          >
            <div v-if="group.id !== undefined">
            <div class="li_top">
            <div class="li_top_left" v-if="group_index == 0 && group.note">{{group.note}}</div>
						<div class="li_top_left" v-else-if="group_index == 0 && group.note == null">开始时间</div>
						<div class="li_top_left" v-else>{{!group.note?'紧跟前场':group.note}}</div>
             <div class="li_top_right" v-if="group_index>=4" :style="group_index < 4 ? '':'flex:1'">
               <div class="li_top_right_item"><span style="display:inline-block;width:10.667vw;text-align: right;height:6.667vw;overflow:hidden">{{item.name.replace("场地","")}}</span><span>-{{ group.place.row }}</span></div>
              
            </div>
            <div class="li_top_right" v-else :style="group_index < 4 ? '':'flex:1'">
              <div>#{{ group.place.row }}&nbsp;</div>
            </div>
          </div>
            <!-- 选手a -->
            <div :class="group.name_a === group.win_site ? 'active_name' : 'name_a'"  v-for="name in getname(group.name_a)"  :key="name">
						 <div v-if="group.team_name_a">{{group.site_a == group.team_name_a? "":group.site_a}}&nbsp;{{group.team_name_a}}</div>
						 <div v-else>{{group.site_a==group.name_a? "":group.site_a}}&nbsp;{{name}}</div>
					 </div>
            <!-- vs -->
            <div class="score_li">
            <div class="vs">vs</div>
            <div class="score">
              <div class="score_top">
                <div v-for="(score, index) in group.score" v-if="score.top!==''" :key="index + '_'">
                <span class="scoretop">{{ score.top }}</span>               
                  <span class="tiebreak" v-if="score.top < score.bot && score.tiebreak">{{score.tiebreak}}</span>                
                  </div>
                <!-- <div v-for="(i, j) in getScoreItem(group.score)" :key="j"></div> -->
                <!-- <div></div> -->
              </div>
              <div class="score_bottom">
                <div v-for="(score, index) in group.score" v-if="score.bot!==''" :key="index + '_'">
                 <span class="scoretop"> {{ score.bot }}</span>
                <span class="tiebreak tiebreakbottom" v-if="score.top > score.bot && score.tiebreak">{{score.tiebreak}}</span> 
                </div>
                <!-- <div v-for="(i, j) in getScoreItem(group.score)" :key="j"></div> -->
              </div>
            </div>
          </div>
            <!--选手b  -->
           <div :class="group.name_b === group.win_site ? 'active_name' : 'name_a'  "   v-for="name in getname(group.name_b)"  :key="name">
						 <div v-if="group.team_name_b">{{group.site_b==group.team_name_b? "":group.site_b}}&nbsp;{{group.team_name_b}}</div>
						 <div v-else>{{group.site_b==group.name_b ? "":group.site_b}}{{name}}</div>
					 </div>
            <div class="formant"  :style="{ backgroundColor: getCurrentProject(group.group_id),color:'#ffffff'}">
              {{ group.group_name }}
            </div>
            <div class="formant" :style="{ backgroundColor: getCurrentProject(group.group_id),color:'#ffffff'}">
              {{ group.wheel_name }}
            </div>
            <div class="match_time">
              <!-- 比赛用时 -->
              <div v-if="group.match_time"  :style="{ backgroundColor: getCurrentProject(group.group_id),color:'#ffffff'}">{{ group.match_time }}</div>
              <div v-else  :style="{ backgroundColor: getCurrentProject(group.group_id),color:'#ffffff'}">&nbsp;</div>
            </div>
            <!-- <div class="triangle"  :style="{ borderBottomColor: getCurrentProject(group.group_id)}"></div>-->
            </div> 
          </div>
        </div>
      </div>

      <van-popup v-model="show" class="team_big">
        <div class="team" @click="show = false">
          <div class="team_header">
            {{ ground_name }}-第{{ team_row }}场序&nbsp;最大场序：{{
              team_field_max
            }}
          </div>
          <div
            class="team_li"
            v-for="(team, team_index) in team_platoon"
            :key="team_index"
          >
            <div style="display: flex; margin: 5px 0">
              <div class="team_time">
                {{ team_index + 1 }}、{{ team.group_name }}第{{
                  team.stage
                }}阶段&nbsp;第{{ team.team_field }}轮-{{ team.place }}
              </div>
              <div>{{ team.match_time }}</div>
            </div>

            <div>
              <span>分数：</span>{{ team.team_name_a }}&nbsp;&nbsp;{{
                team.name_a
              }}
            </div>
            <div class="grade">
              <!-- 分数左 -->
              <div class="opponent" v-if="team.sign_id_a == team.winner_id">
                <div style="color: #65b500; margin-top: 0.02rem">胜者</div>
                <div>vs</div>
                <div>败者</div>
              </div>
              <div
                class="opponent"
                v-else-if="team.sign_id_b == team.winner_id"
              >
                <div style="margin-top: 0.02rem">败者</div>
                <div>vs</div>
                <div style="color: #65b500">胜者</div>
              </div>
              <div class="opponent" v-else>
                <div style="color: #65b500">&nbsp;</div>
                <div>vs</div>
                <div>&nbsp;</div>
              </div>
              <!-- 分数右 -->
              <div class="grade_right">
                <div class="grade_top">
                  <div v-for="(score, index) in team.score" :key="index + '_'">
                    {{ score.top }}
                  </div>
                  <div
                    v-for="(i, j) in getScoreItem(team.score)"
                    :key="j"
                  ></div>
                </div>
                <div class="grade_top">
                  <div v-for="(score, index) in team.score" :key="index + '_'">
                    {{ score.bot }}
                  </div>
                  <div
                    v-for="(i, j) in getScoreItem(team.score)"
                    :key="j"
                  ></div>
                </div>
                <div class="tiebreak">
                  <div v-for="(score, index) in team.score" :key="index + '_'">
                    {{ score.tiebreak }}
                  </div>
                  <div
                    v-for="(i, j) in getScoreItem(team.score)"
                    :key="j"
                  ></div>
                </div>
              </div>
            </div>
            <div style="padding-left: 0.9rem">
              {{ team.team_name_b }}&nbsp;&nbsp;{{ team.name_b }}
            </div>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script>
import tabs from "./tabs";
import teamTabs from "./teamTabs";
import matchEndSearch from "./matchEndSearch";
import roundSwiper from "./roundSwiper";
import roundNumber from "./roundNumber";
import roundForm from "./roundForm";
import { Icon } from "vant";
import matchBattle from "../../../../components/match/matchBattle";
export default {
  components: {
    tabs,
    teamTabs,
    roundSwiper,
    matchEndSearch,
    roundNumber,
    roundForm,
    matchBattle,
  },
  data() {
    return {
      rules: [],
      battleList: [],
      activeTab: 100,
      com_id: this.$route.query.id,
      title: this.$route.query.name,
      defaultId: parseInt(this.$route.query.defaultId),
      slide: [],
      signForm: [],
      tabList: ["签表展示", "成绩汇总", "技术统计", "竞赛规程", "战表"],
      rangForm: [],
      status: [100, 1, 3, 5, 7],
      roundList: [],
      group_list: [],
      keys: [],
      title: this.$route.query.name,
      roundNum: 0,
      type: null,
      form: [],
      indexs: "",
      loop: [],
      num: 0,
      shows: true,
      formshow: true,
      group: "",
      name: "",
      match_date: "",
      noDate: false,
      offset: 0,
      // 战表
      roundSwiper: [],
      com_time: [],
      schedule: [],
      value: "",
      showPicker: false,
      id: "",
      moveY: 0,
      colorList: [],
      name_list: [],

      show: false,
      team_id: "",
      team_platoon: [], //团队列表
      team_row: "", //团队场序
      ground_name: "",
      team_field_max: "",
    };
  },
  mounted() {
    this.match_list();
    this.$store.commit("SET_MSG", this.$route.query.id);
    this.com_id = localStorage.getItem("index");
    this.getmatchInfo();
  },
  computed: {
    _letters() {
      let letters = [];
      let letters_26 = [];
      for (let i = 0; i < 26; i++) {
        letters_26.push(String.fromCharCode(65 + i));
      }
      for (let i = 0; i < 25; i++) {
        for (let x = 0; x < 26; x++) {
          letters.push(
            String.fromCharCode(65 + i + 1) + String.fromCharCode(65 + x)
          );
        }
      }
      return letters_26.concat(letters);
    },
  },
  filters: {
    Company(item) {
      let one_limit = item.one_limit ? item.one_limit : "";
      let two_limit = item.two_limit ? item.two_limit : "";
      let three_limit = item.three_limit ? item.three_limit : "";
      let company = one_limit + two_limit + three_limit;
      let exist = company ? company : "无";
      return exist;
    },
  },
  methods: {
    isPopup(index, group_index) {
      let type = this.schedule[index][group_index].type;
      if (type != 2) {
        return;
      } else {
        this.team_id = this.schedule[index][group_index].id;
        this.team_row = this.schedule[index][group_index].place.row;
        let params = new URLSearchParams();
        params.append("id", this.team_id);
        this.$axios
          .post("/mobile/v1/calendar/team_detail", params)
          .then((suc) => {
            console.log(suc);
            if (suc.data.code == 200) {
              this.team_platoon = suc.data.data.team_platoon;
              this.ground_name = suc.data.data.ground_name;
              this.team_field_max = suc.data.data.team_field_max;
            }
          })
          .catch((res) => {});
        this.show = true;
      }
    },
    //战表start
    getname(name) {
      // console.log(name);
      if (name) {
        let nameL = name.split(",").length;
        if (nameL > 2) {
          // var new_name = name.substring(0,name.length-2);
          var arr = name.split(",");
          let name_a = arr[0] + "-" + arr[arr.length - 1];
          this.name_list[0] = name_a;
          return this.name_list;
        } else {
          this.name_list[0] = name;
          return this.name_list;
        }
      } else {
        let name_b = "";
        this.name_list[0] = name_b;
        return this.name_list;
      }
    },
    getCurrentProject(id) {
      let arr = this.colorList.filter((item) => {
        return item.id == id;
      });
      return arr[0].color;
    },
    handleMove() {
      // this.move()
      this.moveY = -window.scrollX;
    },
    onConfirm(value) {
      this.value = value;
      this.schedule = [];
      this.showPicker = false;
      this.getmatchInfo(true);
    },
    getScoreItem(arr) {
      if (!arr) return new Array(3);
      let size = 3 - arr.length;
      if (size > 0) return new Array(size);
      return [];
    },
    Search() {
      let arr = [];
      for (let i = 1; i < this.schedule.length; i++) {
        this.schedule.forEach((e) => {
          if (e.place.col == 1) {
            arr[i].push(e);
          }
        });
      }
    },
    getmatchInfo(flag = false) {
      let params = new URLSearchParams();
      params.append("com_id", this.com_id);
      params.append("start_date", this.value);
      this.$axios
        .post("/mobile/v1/calendar/match_info", params)
        .then((data) => {
          if (data.data.code == 200) {
            this.com_time = data.data.data.com_time;
            this.id = data.data.data.id;
            this.roundSwiper = data.data.data.ground_name;
            if(!flag)this.value = data.data.data.com_time[0];
            this.colorList = data.data.data.group_list;
            this.getmatchSchedule();
          }
        })
        .catch((res) => {});
    },
    getmatchSchedule() {
      var params = new URLSearchParams();
      params.append("com_id", this.id);
      params.append("date", this.value);
      // params.append("date", this.value);
      this.$axios
        .post("/mobile/v1/calendar/match_schedule", params)
        .then((data) => {
          // console.log(data);
          if (data.data.code == 200) {
            this.roundSwiper.forEach((ele, index) => {
              let arr = data.data.data.filter((item) => {
                return item.place.col == ele.col;
              });
              arr = arr.sort((a, b) => {
                return Number(a.place.row) - Number(b.place.row);
              });

              // let row = arr.slice(-1)[0].place.row / 1;
              let temp  = new Array(Number(arr.slice(-1)[0].place.row)).fill({});
              let row = Number(arr.slice(-1)[0].place.row);
              for (let i = 0; i < row; i++) {
                for (let j = 0; j < arr.length; j++) {
                  if(arr[j].place.row == i+1){
                    temp[i] = arr[j];
                    break;
                  }
                }  
              }
              this.schedule.push(temp);
            });
          }
          // console.log(this.schedule);
        })
        .catch((res) => {});
    },
    // 战表end
    getRules() {
      let com_id = this.$route.query.id;
      this.$axios
        .post("/mobile/matching/get_rule", { com_id })
        .then((res) => {
          if (res.data.data.content) {
            this.rules = res.data.data;
          } else {
            window.location.href = res.data.data.com_info.rule;
          }
        })
        .catch((res) => {
          console.log(res);
        });
    },
    match_list() {
      var params = new URLSearchParams();
      params.append("com_id", this.$route.query.id);
      this.$axios
        .post("/mobile/matching/search_list", params)
        .then((res) => {
          if ((res.data.code = 2000)) {
            this.slide = res.data.data.group;
            this.type = this.slide[0].com_system;
            this.signform(res.data.data.group[0].group_id, this.type);
            this.pool(res.data.data.group[0].group_id);
          }
        })
        .catch((res) => {});
    },
    pool(group_id) {
      var params = new URLSearchParams();
      params.append("com_id", this.$route.query.id);
      params.append("group_id", group_id);
      this.$axios
        .post("/mobile/v1/Platoon/rank_list", params)
        .then((res) => {
          if ((res.data.code = 2000)) {
            this.rangForm = res.data.data;
          }
        })
        .catch((res) => {});
    },
    tabsNumChange(childValue) {
      console.log(childValue);
      this.activeTab = childValue;
      this.defaultId = childValue;
      if (this.activeTab == 3 || this.defaultId == 3) {
        this.refresh();
      } else if (childValue == 5) {
        this.getRules();
      }
    },
    signform(group_id, type) {
      console.log(type);
      if (type == 3) {
        this.formshow = false;
        this.indexs = group_id;
        var arr = [];
        let first_wheel = this.slide[this.num].first_wheel;
        for (var i = 0; i < first_wheel; i++) {
          arr.push("第" + (i + 1) + "轮");
        }
        arr[arr.length - 2] = "半决赛";
        arr[arr.length - 1] = "决赛";
        this.roundList = arr;
        this.sign_table(1);
      }

      if (type == 2) {
        this.indexs = group_id;
        this.roundForms(1, "A");
        this.loop_platoon(1, "A");
        var arr = [];
        arr[arr.length] = "A组";
        this.roundList = arr;
      }

      if (type == 1) {
        let second_order = "A",
          stage = 1;
        this.indexs = group_id;
        this.roundForms(stage, second_order);
        this.loop_platoon(stage, second_order);
        var arr = [];
        let letter = [];
        let str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        letter = str.split("");
        let first_num = this.slide[this.num].first_num;
        let second_wheel = this.slide[this.num].second_wheel;
        for (var i = 0; i < first_num; i++) {
          arr.push("第一阶段-" + letter[i] + "组");
        }
        for (var i = 0; i < second_wheel; i++) {
          arr.push("第二阶段-第" + (i + 1) + "轮");
        }
        this.roundList = arr;
      }
      if (type == 4) {
        let second_order = "A",
          stage = 1;
        this.indexs = group_id;
        this.roundForms(stage, second_order);
        this.loop_platoon(stage, second_order);
        var arr = [];
        let letter = [];
        let str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        letter = str.split("");
        let first_wheel = this.slide[this.num].first_wheel;
        let second_num = this.slide[this.num].second_num;
        for (var i = 0; i < first_wheel; i++) {
          arr.push("第一阶段-" + letter[i] + "组");
        }
        for (var i = 0; i < second_num; i++) {
          arr.push("第二阶段-" + letter[i] + "组");
        }
        this.roundList = arr;
      }
      if (type == 5) {
        this.formshow = false;
        let area = 1;
        this.indexs = group_id;
        let arr = [];
        let first_num = this.slide[this.num].first_num;
        let first_wheel = this.slide[this.num].first_wheel;
        for (let i = 0; i < first_num; i++) {
          arr.push(i + 1 + "区");
        }
        this.roundList = arr;
        this.preliminaries(area);
      }
      if (type == 6) {
        this.formshow = false;
        let second_order = "A",
          stage = 1,
          wheel = 1;
        this.indexs = group_id;
        let arr = [];
        let first_num = this.slide[this.num].first_num; //组数
        let first_wheel = this.slide[this.num].first_wheel; //轮数
        let second_num = this.slide[this.num].second_num;
        console.log(first_num, first_wheel);
        for (let i = 0; i < first_num; i++) {
          for (let j = 0; j < first_wheel; j++) {
            arr.push(this._letters[i] + "组-第" + (j + 1) + "轮");
          }
        }
        this.roundList = arr;
        this.lifting_loop(stage, second_order, wheel);
      }
      if (type == null) {
        this.shows = false;
      } else {
        this.shows = true;
      }
    },
    childByValue(childValue) {
      this.group = childValue.group_id;
      this.name = childValue.name;
      this.match_date = childValue.match_date;
      this.refresh();
    },
    slideNumChange(slideNum) {
      console.log(slideNum);
      this.num = slideNum.i;
      this.type = slideNum.type;
      this.indexs = slideNum.index;
      this.signform(slideNum.index, slideNum.type);
      this.pool(slideNum.index);
      this.roundNum = 0;
      this.formshow = true;
      if (slideNum.type == 3) {
        this.formshow = false;
      }
    },
    roundChange(roundObj) {
      let stage = roundObj.round.indexOf("第一阶段") == -1 ? 2 : 1;
      this.roundNum = roundObj.showIndex;
      let roundNum = roundObj.showIndex;
      var keys = [];
      var values = [];
      for (var key in this.group_list[roundNum]) {
        if (this.group_list[roundNum].hasOwnProperty(key) === true) {
          keys.push(key);
          values.push(this.group_list[roundNum][key]);
        }
      }
      if (this.type == 3) {
        let substr = roundObj.showIndex + 1;
        this.sign_table(substr);
        this.formshow = false;
        this.signForm = this.group_list;
      }
      if (this.type == 1) {
        let substr = roundObj.round.slice(-2, -1);
        console.log(stage, substr);
        this.roundForms(stage, substr);
        this.loop_platoon(stage, substr);
      }
      if (this.type == 4) {
        let substr = roundObj.round.slice(-2, -1);
        this.roundForms(stage, substr);
        this.loop_platoon(stage, substr);
      }
      if (this.type == 5) {
        let area = roundObj.round.slice(0, 1);
        this.preliminaries(area);
      }
      if (this.type == 6) {
        let stage = 1;
        let arr = roundObj.round.split("-");
        let wheel = parseInt(arr[1].replace(/[^0-9]/gi, ""));
        let group = arr[0].substr(0, arr[0].length - 1);
        this.lifting_loop(stage, group, wheel);
      }
    },
    roundForms(stage, substr) {
      var params = new URLSearchParams();
      params.append("com_id", localStorage.getItem("index"));
      params.append("group_id", this.indexs);
      params.append("stage", stage);
      params.append("second_order", substr);
      this.$axios
        .post("/mobile/v1/loop/loop_table", params)
        .then((res) => {
          if (res.data.code == 200) {
            console.log(this.roundNum, this.slide[this.num].first_num);
            if (this.roundNum >= this.slide[this.num].first_num) {
              this.formshow = false;
            } else {
              this.formshow = true;
              this.form = res.data.data;
            }
          }
        })
        .catch((res) => {});
    },
    loop_platoon(stage, substr) {
      var params = new URLSearchParams();
      params.append("com_id", localStorage.getItem("index"));
      params.append("group_id", this.indexs);
      params.append("stage", stage);
      params.append("second_order", substr);
      this.$axios
        .post("/mobile/v1/loop/loop_platoon", params)
        .then((res) => {
          if (res.data.code == 200) {
            this.signForm = res.data.data;
          }
        })
        .catch((res) => {});
    },
    sign_table(wheel) {
      var params = new URLSearchParams();
      params.append("group_id", this.indexs);
      params.append("wheel", wheel); //传轮次
      this.$axios
        .post("/mobile/v1/loop/sign_table", params)
        .then((res) => {
          if (res.data.code == 200) {
            this.signForm = res.data.data;
          }
        })
        .catch((res) => {});
    },
    preliminaries(area) {
      var params = new URLSearchParams();
      params.append("group_id", this.indexs);
      params.append("area", area);
      this.$axios
        .post("/mobile/v1/loop/primary_table", params)
        .then((res) => {
          if (res.data.code == 200) {
            this.signForm = res.data.data;
          } else {
            this.shows = false;
          }
        })
        .catch((res) => {});
    },
    lifting_loop(stage, second_order, wheel) {
      var params = new URLSearchParams();
      params.append("group_id", this.indexs);
      params.append("stage", stage);
      params.append("second_order", second_order);
      params.append("wheel", wheel);
      this.$axios
        .post("/mobile/v1/loop/lifting_loop", params)
        .then((res) => {
          if (res.data.code == 2000) {
            this.signForm = res.data.data;
          } else {
            this.shows = false;
          }
        })
        .catch((res) => {});
    },
    no_ongoing_match() {
      var params = new URLSearchParams();
      params.append("com_id", this.com_id);
      params.append("status", 3);
      params.append("group_id", this.group);
      params.append("match_date", this.match_date);
      params.append("search", this.name);
      params.append("page", this.offset);
      params.append("open_id", window.localStorage.getItem("openid"));
      this.$axios
        .post("/mobile/matching/no_ongoing_match", params)
        .then((data) => {
          if (data.data.code == 2000) {
            if (this.offset == 1) {
              this.battleList = data.data.data;
            } else {
              this.battleList = this.battleList.concat(data.data.data);
            }
            if (data.data.data.length < 10) {
              this.noDate = true;
            } else {
              // if (fn) fn()
            }
          } else {
            return false;
          }
        })
        .catch((res) => {
          //  console.log(res.msg);
        });
    },
    infinite: function (done) {
      if (this.noDate) {
        this.$refs.myscroller.finishInfinite(true);
      } else {
        setTimeout(() => {
          this.offset++; //下拉一次页数+1
          this.no_ongoing_match(done);
          done(); //进行下一次加载操作
        }, 500);
      }
    },
    refresh: function (done) {
      this.offset = 1;
      this.noDate = false;
      setTimeout(() => {
        this.no_ongoing_match(done);
        this.$refs.myscroller.finishPullToRefresh(); //停止下拉刷新动效
      }, 300);
    },
    scroll() {
      let scroller = this.$refs.myscroller;
      scroller.scrollTo(0, 0, true);
    },
  },
};
</script>
<style scoped lang="less">
.scroll {
  margin-top: 40px;
}
.tab-box {
  position: fixed;
  width: 100%;
  z-index: 100;
}
.table {
  padding: 0.4rem 0.2rem;
}

table {
  border-collapse: collapse;
  border: none;
  width: 100%;
}

th,
td {
  border: 1px solid #42b574;
  padding: 0.1rem 0.05rem;
}

.fixed {
  position: fixed;
  bottom: 50px;
  right: 10px;
  width: 30px;
  height: 30px;
  font-size: 26px;
}

.match-detail {
  margin-bottom: 1.1rem;
}

.tabs {
  position: fixed;
  top: 45px;
  z-index: 9999;
  width: 100%;
}
.article {
  width: 90%;
  margin: 3% 5% 6% 5%;
  text-align: left;
  margin-bottom: 12vh;
  /deep/ img,
  video {
    max-width: 99% !important;
    // padding-left: 2%;
    // border: 1px solid red!important;
  }
  /deep/ h1,
  strong {
    border-left: 10px solid red !important;
  }
}
.fixed {
  position: fixed;
  bottom: 13.333vw;
  right: 2.667vw;
  width: 8vw;
  height: 8vw;
  font-size: 6.933vw;
}
.match-detail {
  margin-bottom: 0rem;
}
.tabs {
  position: fixed;
  top: 12vw;
  z-index: 9999;
  width: 100%;
}
.Swiper {
  width: 100vw;
  display: flex;
  justify-content: flex-start;
  margin-top: 1.8rem;
  // margin-top: 2.4rem;
  margin-bottom: 5.333vw;
  padding: 0 2.133vw;
  font-size: 4vw;
  line-height: 6.667vw;
  padding-bottom: 0.6rem;
}
.content {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  position: relative;
}
.field_li {
  width: 31.467vw;
  // height: 37.654vw;
  min-height: 37.333vw;
  font-size: 3.2vw;
  // background-color: #f0fbf6;
  border: solid 0.267vw #e9e9e9;
  position: relative;
}
.li_top {
  display: flex;
  height: 5.333vw;
  line-height: 5.333vw;
}
.li_top_left {
  color: #4d6654;
  flex: 1;
  text-align: center;
  border: solid 0.267vw #e9e9e9;
  border-left: none;
  border-top: none;
}
.li_top_right {
  overflow: hidden;
  color: #666666;
  display: flex;
}
.li_top_right div{
    line-height: 5.333vw;
}
.li_top_right_item{
  width: 9.333vw;
  flex: 1;
  line-height: 5.333vw;
  display: flex;
  justify-content: space-evenly;
  /* transform: scale(1); */
}
.li_top_right_item span{
  display: inline-block;
}

.name_a {
  width: 100%;
  height: 5.333vw;
  overflow: hidden;
  line-height: 5.333vw;
  line-height: 5.333vw;
  font-size: 3.733vw;
  text-align: center;
}
/* 获胜name */
.active_name {
  width: 100%;
  height: 5.333vw;
  overflow: hidden;
  line-height: 5.333vw;
  line-height: 5.333vw;
  font-size: 3.733vw;
  text-align: center;
  color: #65b500;
}
.score_li {
  display: flex;
  height: 8vw;
  width: 26.667vw;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
}
.vs {
  flex: 3;
  height: 8vw;
  line-height: 8vw;
  border: dashed 0.267vw #ccc;
  border-left: none;
}
.score {
  flex: 6;
  display: flex;
  flex-direction: column;
}
.score_top,
.score_bottom {
  display: flex;
  height: 4vw;
  line-height: 4vw;
}
.score_top{
  position: relative;
}
.score_top div {
  flex: 1;
  border: dashed 0.267vw #ccc;
}
.score_bottom div {
  flex: 1;
  border: dashed 0.267vw #ccc;
}
.formant {
  height: 4vw;
  width: 100%;
  line-height: 4vw;
  font-size: 3.2vw;
}
.match_time {
  // text-align: right;
  // padding-right: 5.333vw;
   height: 5.333vw;
  line-height: 5.333vw;
    width: 100%;
  overflow: hidden;
}
.triangle {
  width: 0;
  height: 0;
  border-bottom: 8.333vw solid;
  border-left: 8.333vw solid transparent;
  position: absolute;
  bottom: 0;
  right: 0;
}
.ground_name {
  width: 31.467vw;
  background-color: #d9f1e6;
  border-left: #ccc;
  border-right: #ccc;
  overflow: hidden;
  height: 6.667vw;
}
.van-cell {
  height: 0.9rem;
  line-height: 0.9rem;
  padding: 0;
  position: fixed;
  top: 1.7rem;
  z-index: 10;
  font-size: 0.3rem;
}
.clone_ground_name {
  height: 0.7rem;
  line-height: 0.7rem;
  position: fixed;
  top: 2.58rem;
  display: flex;
  /* line-height: 25px; */
  /* position: sticky; */
  left: 2.133vw;
  z-index: 8;
}
.clone_ground_name .ground_name {
  width: 32vw;
  background-color: #d9f1e6;
  border-left: #ccc;
  border-right: #ccc;
}
.team {
  width: 6.2rem;
  text-align: left;
  padding: 0 0.4rem;
  padding-top: 0.2rem;
}
.team_li {
  margin-bottom: 0.4rem;
}
.grade {
  display: flex;
  width: 80%;
  justify-content: center;
  margin: 0 auto;
  margin-bottom: 0.1rem;
  margin-top: 0.1rem;
}
.opponent {
  flex: 1;
  text-align: center;
  height: 0.86rem;
  font-size: 0.28rem;
  line-height: 0.28rem;

  border: dashed 0.267vw #ccc;
  border-left: none;
}
.grade_right {
  flex: 3;
  display: flex;
  flex-direction: column;
}
.grade_top {
  padding-left: 0 !important;
}
.grade_right div {
  display: flex;
  flex: 1;
  height: 0.4rem;
  padding-left: 0.1rem;
  line-height: 0.4rem;
  text-align: center;
  border: dashed 1px #ccc;
  border-left: none;
  border-bottom: none;
}
.tiebreak {
  padding: 0 !important;
}
span.tiebreak{
  position: absolute;
  transform: scale(0.7);
  top: -0.533vw;
}
span.tiebreakbottom{
  top: 14.133vw;
}
.tiebreak div {
  border: solid 1px #dcdfe6 !important;
  border-radius: 0.04rem;
  padding-left: 0.08rem !important;
}
.team_time {
  flex: 1;
}
.team_big {
  border-radius: 0.2rem;
}
</style>
